<template>
  <div v-loading="loading" element-loading-text="正在生成充电健康状态评估报告，请稍后....">
    <div id="content" class="content_hello">
      <!-- <div style="color:#fff;font-size:20px">{{queryString}}</div> -->
      <div class="position_bgs">
        <div class="bgs_circle">
          <img class="qin_cir1" src="../assets/healthy/u275.svg" />
          <img class="qin_cir2" src="../assets/healthy/u289.svg" />
          <img class="qin_cir3" src="../assets/healthy/u288.svg" />
          <img class="qin_cir4" src="../assets/healthy/u291.svg" />
        </div>
      </div>
      <div class="vin_card">
        <img style="width: 1.5rem; height: 1.5rem; margin-right: 0.5rem" src="../assets/healthy/u274.png" />
        {{ carModel }} VIN:{{ userVIN }}
        <!-- <div class="vindiv">VIN:{{ userVIN }}</div> -->
      </div>
      <div>
        <div class="tan_left">
          <img class="bgs_san_jiao_left" src="../assets/healthy/u258.svg" />
          <img class="bgs_san_jiao_center" src="../assets/healthy/u257.svg" />
          <img class="bgs_san_jiao_right" src="../assets/healthy/u256.svg" />
        </div>
      </div>
      <div class="dian_ci_jia">
        <div class="dian_ci">电动汽车充电安全小卫士健康评估报告</div>

        <div class="tan_right">
          <!-- ../assets/images/healthy/u256.svg -->
          <img class="bgs_san_jiao2_left" src="../assets/healthy/u256.svg" />

          <img class="bgs_san_jiao2_center" src="../assets/healthy/u257.svg" />

          <img class="bgs_san_jiao2_right" src="../assets/healthy/u258.svg" />
        </div>
      </div>
      <div class="bao_gao">
        <div class="bao_gao_left">
          {{ carModel }}
        </div>
        <div class="bao_gao_right">报告生成时间:{{ today }}</div>
      </div>
      <!-- 评分 -->
      <div class="scope">综合评分</div>
      <div class="scope_wrap">
        <div class="scope_bom">
          {{ carScore.batteryHealthScore }}
        </div>
      </div>
      <div class="batter">
        <text>电池健康级别:{{ carScore.batteryHealthLevel }}</text>
      </div>
      <div class="batter_btn">
        <div class="batter_btn_left">
          <img src="../assets/healthy/u266.svg" />
          <text style="margin-right: 0.8%">电池剩余容量</text>
          <text style="font-size: 1.75rem; margin-left: 0.5rem">{{ carScore.batteryMaxCapacityRate }}%</text>
        </div>
        <div class="batter_btn_right">
          <img src="../assets/healthy/u270.svg" />
          <text style="margin-right: 0.8%">电池衰减度</text>
          <text style="font-size: 1.75rem; margin-left: 0.5rem">{{ carScore.batteryDecayRate }}%</text>
        </div>
      </div>
      <div class="health_major" style="margin-bottom: 1.875rem">
        <img class="major_1" src="../assets/healthy/u283.svg" />
        <img class="major_2" src="../assets/healthy/u284.svg" />

        <div class="major_name">
          <div>电池基本信息</div>
          <img class="major_3" src="../assets/healthy/u286.svg" />
          <img class="major_4" src="../assets/healthy/u287.svg" />
        </div>
      </div>

      <div class="base_con">
        <div class="base_con1">
          <div class="base_item" v-for="(item, index) in batterInfo1" :key="index">
            <div class="con_name">
              {{ item.type }}
            </div>
            <div class="con_value2" v-if="item.type == '电池类型'">
              <text>{{ item.value }}</text>
              <text>{{ item.unit }}</text>
            </div>
            <div class="con_value" v-else>
              <text>{{ item.value }}</text>
              <text>{{ item.unit }}</text>
            </div>
          </div>
        </div>
        <div class="base_con2">
          <div class="base_item" v-for="(item, index) in batterInfo2" :key="index">
            <div class="con_name">
              {{ item.type }}
            </div>
            <div class="con_value">
              <text>{{ item.value }}</text>
              <text>{{ item.unit }}</text>
            </div>
          </div>
        </div>
        <div class="base_con3">
          <div class="base_item" v-for="(item, index) in batterInfo3" :key="index">
            <div class="con_name">
              {{ item.type }}
            </div>
            <div class="con_value">
              <text>{{ item.value }}</text>
              <text>{{ item.unit }}</text>
            </div>
          </div>
        </div>
      </div>
      <!-- 健康评估 -->
      <div class="ansy">
        <div class="health_major" style="margin-bottom: 1.875rem">
          <img class="major_1" src="../assets/healthy/u283.svg" />
          <img class="major_2" src="../assets/healthy/u284.svg" />

          <div class="major_name">
            <div>健康评估指标分析</div>
            <img class="major_3" src="../assets/healthy/u286.svg" />
            <img class="major_4" src="../assets/healthy/u287.svg" />
          </div>
        </div>

        <div class="ansy_right">
          电池健康得分: {{ carScore.batteryHealthScore }}
        </div>
      </div>
      <div class="echartsWrap">
        <cus-echarts canvasId="line" lazyLoad refName="radarRef" :option="radarOption"></cus-echarts>
      </div>
      <div class="ansy_btn_wrap">
        <div class="ansy_btn">
          <div class="ansy_bor"></div>
          <img src="../assets/healthy/u343.svg" />
          打败同车型75%的用户
        </div>
      </div>
      <!-- 近期充电情况分析 -->
      <div class="ansy">
        <div class="health_major" style="margin-bottom: 1.875rem">
          <img class="major_1" src="../assets/healthy/u283.svg" />
          <img class="major_2" src="../assets/healthy/u284.svg" />

          <div class="major_name">
            <div>全部订单</div>
            <img class="major_3" src="../assets/healthy/u286.svg" />
            <img class="major_4" src="../assets/healthy/u287.svg" />
          </div>
        </div>

        <div class="ansy_date_btn">
          <div class="date_mounth">近三个月</div>
          <div class="date_division">|</div>
          <div class="date_year">近半年</div>
        </div>
      </div>

      <div class="charge_analysis">
        <div class="charge_analysis_item" v-for="(item, index) in chargeAnalysis" :key="index">
          <div class="charge_analysis_value" :style="item.value == 0 ? 'color:#27c6a5' : ''">
            {{ item.value }}
            <text style="font-size: 0.75rem">{{ item.unit }}</text>
          </div>
          <div class="charge_analysis_name">
            <div>{{ item.name }}</div>
          </div>
        </div>
      </div>
      <div class="ansy" style="padding-bottom: 1.25rem">
        <div class="ansy_left">异常订单原因分析</div>
      </div>
      <div v-if="engPieData && engPieData.length > 0" class="err_cir echartsWrap">
        <div>
          <cus-echarts refName="cirRef" :option="engPieOption"></cus-echarts>
        </div>

      </div>
      <div style="color:#27c6a5;padding:15px" v-else>
        近期暂无异常订单
      </div>
      <div class="ansy">
        <div class="ansy_left">异常订单预警详情</div>
        <div class="ansy_date_btn">
          <div class="date_year">默认展示近五次预警订单</div>
        </div>
      </div>
      <div class="abnormal_order">

        <div style="color:#27c6a5;padding:15px" v-if="(abnormalOrder && abnormalOrder.length < 1)"> 近期暂无异常订单</div>
        <div class="orderWrap">
          <div class="order_img"></div>
          <div class="order_item" v-for="(item, index) in abnormalOrder" :key="index">
            <div class="order_icon"></div>

            <!-- <img class="order_img" src="../assets/healthy/u396.png" /> -->
            <div class="order_type">
              {{ item.type }}
            </div>
            <div class="order_di">|</div>
            <div class="order_name">
              {{ item.chargeStation }} {{ item.chargeTime }}
            </div>
          </div>
        </div>
      </div>

      <div class="order_wrap">
        <div class="order_btn" v-if="abnormalOrder && abnormalOrder.length > 0">查看更多</div>
      </div>
      <div class="health_major" style="margin-bottom: 1.875rem">
        <img class="major_1" src="../assets/healthy/u283.svg" />
        <img class="major_2" src="../assets/healthy/u284.svg" />

        <div class="major_name">
          <div>电池健康专业分析</div>
          <img class="major_3" src="../assets/healthy/u286.svg" />
          <img class="major_4" src="../assets/healthy/u287.svg" />
        </div>
      </div>

      <div class="ansy">
        <div class="ansy_left">SOC一致性</div>
        <div class="ansy_date_btn">
          <div class="date_year">得分</div>
          <div class="date_division">:</div>
          <div class="date_mounth">{{ man[4] }}</div>
        </div>
      </div>
      <div class="soc_tit">
        这是您的爱车历史充电订单中，每笔订单电池组SOC变化的情况。SOC速率波动性越小电池越稳定。
      </div>
      <div class="line echartsWrap">
        <cus-echarts refName="engRef" :option="engLineOption"></cus-echarts>
      </div>
      <!-- 电压一致 -->
      <div class="ansy">
        <div class="ansy_left">单体最高电压一致性分析</div>
        <div class="ansy_date_btn">
          <div class="date_year">得分</div>
          <div class="date_division">:</div>
          <div class="date_mounth" style="color: #24b496">97</div>
        </div>
      </div>
      <div class="soc_tit">
        这是您的爱车历史充电订单中，每笔订单各单体电池之间电压差的情况，电压波动越小，电池越稳定。
      </div>
      <div class="line echartsWrap">
        <cus-echarts refName="voltageRef" :option="voltageOption"></cus-echarts>
      </div>
      <div class="ansy">
        <div class="ansy_left">单体最高电压变化趋势</div>
      </div>
      <div class="soc_tit" style="margin-top: 1rem">
        这是您的爱车历史充电订单中，每笔订单电池最高电压的变化情况，电压波动越小，电池越稳定。
      </div>
      <div class="line echartsWrap">
        <cus-echarts refName="voltageMaxRef" :option="voltageMaxOption"></cus-echarts>
      </div>
      <!-- 最高电压分布 -->
      <div class="ansy">
        <div class="ansy_left">单体最高电压分布</div>
      </div>
      <div class="soc_tit" style="margin-top: 1rem">

        这是您的爱车历史充电订单中，电池包中最高单体动力电池电压所在编号的频次，单体电压频次集中，可能会影响您电池的充电量，导致充不满或电池过充。
      </div>
      <div class="line echartsWrap">
        <cus-echarts refName="sinMaxRef" :option="sinMaxOption"></cus-echarts>
      </div>
      <!-- <div class="soc_tit">
        近期充电订单，<text style="color: red;">2#电池组</text>出现最高电压次数最多，请留意电池预警信息
      </div> -->
      <!-- voltageMaxOption -->

      <!-- 温度致 -->
      <div class="ansy">
        <div class="ansy_left">温度一致性</div>
        <div class="ansy_date_btn">
          <div class="date_year">得分</div>
          <div class="date_division">:</div>
          <div class="date_mounth" style="color: #e69c2d">97</div>
        </div>
      </div>
      <div class="soc_tit" style="margin-top: 1rem">
        这是您的爱车历史充电订单中，每笔订单各温度探针的温度极差情况，温差波动越小，电池越稳定。
      </div>
      <div class="line echartsWrap">
        <cus-echarts refName="temRef" :option="temperatureOption"></cus-echarts>
      </div>

      <!-- 单体最高温度变化趋势 -->
      <div class="ansy">
        <div class="ansy_left">单体最高温度变化趋势</div>
      </div>
      <div class="soc_tit" style="margin-top: 1rem">
        这是您爱车历史充电订单中，每笔订单电池最高温度的变化情况，电池温控越好。
      </div>
      <div class="line echartsWrap">
        <cus-echarts refName="temChangeRef" :option="temChangeOption"></cus-echarts>
      </div>
      <!-- 最大温升速率变化 -->
      <div class="ansy">
        <div class="ansy_left">最大温升速率变化</div>
      </div>
      <div class="soc_tit" style="margin-top: 1rem">
        这是您爱车历史充电订单中，每笔订单最大温升速率的变化情况，相同充电条件下，电池温控越好。
      </div>
      <div class="line echartsWrap">
        <cus-echarts :option="temUpOption"></cus-echarts>
      </div>
      <div class="ansy">
        <div class="ansy_left">单体最高温度分布</div>
      </div>
      <div class="soc_tit" style="margin-top: 1rem">
        这是您爱车历史充电订单中，电池包中最高温度探针所在编号出现的频次，温度探针频次越分散意味看电池的温控（电池保温和散热）越好。
      </div>
      <div class="line echartsWrap">
        <cus-echarts :option="sinTemOption"></cus-echarts>
      </div>
      <!-- <div class="soc_tit soc_by">
        <img src="../assets/healthy/u447.svg">
        近期充电订单，<text style="color: red;">5#电池组</text>出现最高温度次数较多，请留意电池预警信息
      </div> -->
    </div>
  </div>
</template>

<script setup>
import JSEncrypt from "jsencrypt/bin/jsencrypt.min";

const RSAdecrypt = (pas) => {
  let jse = new JSEncrypt();
  // 私钥
  jse.setPrivateKey(privateKey);
  console.log("解密" + jse.decrypt(pas));
  return jse.decrypt(pas);
};

const crypt = new JSEncrypt();
// 公钥，由后端接口返回，这里写死作为测试
const publicKey =
  "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCHQh8qVJF1nJ0A-iL_ksa9kcF9-GmQ8BidUg5p78jjeuSBDaR-vc6jM9SxPmfWPfEOtXrIQj0y3_isEv1Z8PeSO1pLt2pP5gSgp3OATChDz--T46dkQpkAIw3bsWkS6RAgEssRvr6xWsD112wMDI2z6K8XbCPbCPDA3tRiTdKwtQIDAQAB";
crypt.setPublicKey(publicKey);
const data = "furao";
const encrypted = crypt.encrypt(data);
console.log("对字符串furao加密", encrypted);
let privateKey =
  "MIICdQIBADANBgkqhkiG9w0BAQEFAASCAl8wggJbAgEAAoGBAIdCHypUkXWcnQD6Iv-Sxr2RwX34aZDwGJ1SDmnvyON65IENpH69zqMz1LE-Z9Y98Q61eshCPTLf-KwS_Vnw95I7Wku3ak_mBKCnc4BMKEPP75Pjp2RCmQAjDduxaRLpECASyxG-vrFawPXXbAwMjbPorxdsI9sI8MDe1GJN0rC1AgMBAAECgYBUoUy6wbtZ6apbKCep3f64MnDtDveOlovwM52NL1l07Dn5fb3FB6I5f36_gBqcdJlV6LtwffGo2XbQw_j9w8ZDL4tQ4PMY_2u_2n-WKsqwit5CuQU49DckQFODdHvsaT7CwVvAcrkgW4s3gMVVU79nO5oHWys2CX4PlKky5Af86QJBANisB2g06NNcPAUSoYBW3k-W2XupakxdJ2DTQwR_B2ODvfMVtoTYC0t_nJkFL8ubXE3NTnRz3UT5Zu83wdbD0PsCQQCfzxb_AuWtbeacnQYJh-IaCA8Nmz_8mdz7d1ErE5FaAKCz7SHmbCEnl9Uaz8Ejz_MfwynWuI_FqegVltxwpbYPAkAUiZnaIsm-3wtBX9a3F4TS_nV250QQIPROlTfRAUluAVrL4879II1RhrMNPhSdtAg3x7IcD691jj5Xhm11MfJpAkAoX5xSrrux1fsWBAGbdM3lf7W13UwMGB8hFKLX_CiTkWcILdeLrDOwGgbHsEb-MjIdCyRNz_DaojM1CRkGCId3AkBDkNoGHdXyhGucMF2R5IAk4MmxWQS_JWpcz_-nvPfMIc_di8EIr9z_5CFvNLl9PbjY2r5HGeNhr2WTTC5Mn6iz";

RSAdecrypt(encrypted);
//解密方法

// const encrypted = crypt.encrypt(JSON.stringify(data))

import {
  onMounted,
  ref,
  defineProps,
  watch,
  reactive,
  getCurrentInstance,
} from "vue";
// import {
// 	onLoad,
// 	onShow
// } from "@dcloudio/uni-app";
// 引入echarts组件
import cusEcharts from "./cusEcharts/index.vue";
import {
  getCarNo,
  getCarModel,
  getBatteryBaseData,
  getCarScore,
  getHealthAssAnalysis,
  getOrderAnalysis,
  getMaxTempRiseRate,
  getSignalMaxTemp,
  getSignalMaxTempDist,
  getSignalMaxVoltage,
  getSignalMaxVoltageDist,
  getSocConsistency,
  getTempConsistency,
  getVoltageConsistency,
} from "../api/com.ts";
const queryString = ref("324222222");

const loading = ref(true);
let loadingNum = ref(0);
const optionPie = {
  tooltip: {
    trigger: "item",
  },
  legend: {
    top: "5%",
    left: "center",
  },
  series: [
    {
      name: "Access From",
      type: "pie",
      radius: ["40%", "70%"],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: "center",
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 20,
          fontWeight: "bold",
        },
      },
      labelLine: {
        show: false,
      },
      data: [
        {
          value: 1048,
          name: "Search Engine",
        },
        {
          value: 735,
          name: "Direct",
        },
        {
          value: 580,
          name: "Email",
        },
        {
          value: 484,
          name: "Union Ads",
        },
        {
          value: 300,
          name: "Video Ads",
        },
      ],
    },
  ],
};
const getMessage = (event) => {
  console.log("Received message from H5 page:", event.detail.data);
};
const userInfo = ref({});
onMounted(() => {
  userInfo.value = {
    vin: "LA9BCJBX3JBLM6456",
  };
  //LA9BCJBX3JBLM6459 LKLA6L1G6JA740458
  userVIN.value = "LA9BCJBX3JBLM6456";

  setTimeout(() => {
    queryString.value = window.location.href.split("=")[1];
    //console.log(window.location, "queryString");
    //const vin = crypt.encrypt(userInfo.value.vin);
//userInfo.value = {
   //   vin: vin,
   // };
     userInfo.value = {
      vin: crypt.encrypt(queryString.value),
    };
    userVIN.value = queryString.value;
    requestAll();
  }, 200);
});

let carNo = ref("京A54DD12");

// 查询车牌
const getCarNoList = () => {
  //  const vin = crypt.encrypt(userInfo.value.vin)

  getCarNo({
    vin: userInfo.value.vin,
  })
    .then(async (res) => {
      if (res.code === 200) {
        carNo.value = res.result;
      }
    })
    .finally(() => {
      loadingNum.value++;
      console.log(loadingNum.value, "loadingNum.value");
      if (loadingNum.value == 14) {
        loading.value = false;
        console.log(loading.value, "loading!!!!!!!");
      }
    });
};
let today = ref("2024-12-01");
today.value = new Date().toISOString().split("T")[0];

let carModel = ref("比亚迪 秦PLUS 2024款 荣耀版 EV");
const getCarModelList = () => {
  getCarModel({
    vin: userInfo.value.vin,
  })
    .then(async (res) => {
      console.log("车型", res);
      if (res.code === 200) {
        carModel.value = res.result;
      }
    })
    .finally(() => {
      loadingNum.value++;
      console.log(loadingNum.value, "loadingNum.value");
      if (loadingNum.value == 14) {
        loading.value = false;
        console.log(loading.value, "loading!!!!!!!");
      }
    });
};
// 综合评分
let carScore = ref({
  batteryHealthScore: 90,
  batteryHealthLevel: "健康",
  batteryMaxCapacityRate: 99,
  batteryDecayRate: 14,
});
const getCarScoreList = () => {
  getCarScore({
    vin: userInfo.value.vin,
  })
    .then(async (res) => {
      console.log("车型", res);
      if (res.code === 200) {
        carScore.value.batteryHealthScore = res.result.batteryHealthScore;

        carScore.value.batteryHealthLevel = res.result.batteryHealthLevel;

        carScore.value.batteryMaxCapacityRate =
          res.result.batteryMaxCapacityRate;
        carScore.value.batteryDecayRate = res.result.batteryDecayRate;
        console.log(carScore.value, "carScore.value");
      }
    })
    .finally(() => {
      loadingNum.value++;
      console.log(loadingNum.value, "loadingNum.value");
      if (loadingNum.value == 14) {
        loading.value = false;
        console.log(loading.value, "loading!!!!!!!");
      }
    });
};
import * as echarts from "echarts";

import {
  lineOption,
  pieOption,
  radarChart,
  barOption,
} from "./cusEcharts/option";
const requestAll = () => {
  getCarNoList();
  getCarScoreList();
  getCarModelList();

  getOrderAnalysisList();
  getBatteryBaseDataList();
  getHealthAssAnalysisList();
  getMaxTempRiseRateList(); //最大温差趋势分析
  getSignalMaxTempDistList(); //单体最高温度分布
  getSignalMaxTempList(); //单体最高温度变化趋势
  getSignalMaxVoltageList(); //单体最高电压变化趋势
  getSignalMaxVoltageDistList(); //单体最高电压分布
  getSocConsistencyList(); //soc一致性
  getTempConsistencyList(); //温度一致性
  getVoltageConsistencyList(); //电压一致性
};
const chartData = ref({});
const userVIN = ref("");
const getInfoAll = () => {
  // 	uni.request({
  // 		url: 'https://www.chargesystem.cn/charge4gv2/wechat/getUserInfo', // 你的登录API地址
  // 		method: 'GET',
  // 		data: {
  // 			openid: uni.getStorageSync('openid'),
  // 		},
  // 		success: (res) => {
  // 			userInfo.value = res.data.result
  // 			console.log(res.data.result.vin, 'res')
  // 			// 获取完vin后,查询相关信息
  // 			requestAll()
  // 		},
  // 		fail: () => {
  // 			uni.showToast({
  // 				title: '请求失败',
  // 				icon: 'none'
  // 			});
  // 		}
  // 	});
};

// // 跳转到登录页面
// onShow(() => {
// 	console.log('触页面index', uni.getStorageSync('isLogin'))
// 	if (uni.getStorageSync('isLogin') == true) {} else {
// 		uni.reLaunch({
// 			url: '/pages/login/login'
// 		})
// 	}

// })

// 折现图

// 电压一致性
const voltageData = ref([
  {
    product: "23",
    count: 0.1,
  },
  {
    product: "24",
    count: 0.14,
  },
  {
    product: "23-02-03",
    count: 0.17,
  },
  {
    product: "23-02-04",
    count: 0.02,
  },
  {
    product: "23-02-05",
    count: 0.2,
  },
  {
    product: "23-02-06",
    count: 0.24,
  },
]);
const voltageOption = reactive(JSON.parse(JSON.stringify(lineOption)));
voltageOption.dataset.source = voltageData.value;
let voltageX = [];
const getVoltageConsistencyList = () => {
  getVoltageConsistency({
    vin: userInfo.value.vin,
  })
    .then(async (res) => {
      console.log("电压一致性", res);
      if (res.code === 200) {
        voltageData.value = [];
        res.result.map((item) => {
          let Xitem = "";

          Xitem = item.x;

          let arr = {
            product: Xitem,
            count: item.y,
          };

          voltageData.value.push(arr);
        });
        voltageOption.dataset.source = voltageData.value;

        voltageOption.color = [];
        console.log(voltageData.value, "voltageData");
      }
    })
    .finally(() => {
      loadingNum.value++;
      console.log(loadingNum.value, "loadingNum.value");
      if (loadingNum.value == 14) {
        loading.value = false;
        console.log(loading.value, "loading!!!!!!!");
      }
    });
};

voltageOption.yAxis.name = "压差（V）";
voltageOption.series[0].name = "压差（V）";
voltageOption.series[0].lineStyle.color = "#24b496";
voltageOption.series[0].itemStyle.normal.borderColor = "#24b496";
voltageOption.series[0].areaStyle.color = new echarts.graphic.LinearGradient(
  0,
  0,
  0,
  1,
  [
    {
      offset: 0,
      color: "rgba(36, 180, 150, 1)",
    },
    {
      offset: 0.6,
      color: "rgba(36, 180, 150, 0.5)",
    },
    {
      offset: 1,
      color: "rgba(36, 180, 150, 0.1)",
    },
  ]
);

// 单体最高电压变化
const voltageMaxData = ref([
  {
    product: "23-02-01",
    count: 0.1,
  },
  {
    product: "23-02-02",
    count: 0.14,
  },
  {
    product: "23-02-03",
    count: 0.17,
  },
  {
    product: "23-02-04",
    count: 0.02,
  },
  {
    product: "23-02-05",
    count: 0.2,
  },
  {
    product: "23-02-06",
    count: 0.24,
  },
]);
const voltageMaxOption = reactive(JSON.parse(JSON.stringify(lineOption)));
voltageMaxOption.dataset.source = voltageData.value;

const getSignalMaxVoltageList = () => {
  getSignalMaxVoltage({
    vin: userInfo.value.vin,
  })
    .then(async (res) => {
      console.log("单体最高电压变化趋势", res);
      if (res.code === 200) {
        voltageMaxData.value = [];
        res.result.map((item) => {
          let Xitem = "";
          // if (item.x.length > 10) {
          //   Xitem = item.x.substring(0, 10);
          // } else {
          Xitem = item.x;
          // }
          let arr = {
            product: Xitem,
            count: item.y,
          };
          voltageMaxData.value.push(arr);
        });
        voltageMaxOption.dataset.source = voltageMaxData.value;
        voltageMaxOption.color = [];
        console.log(voltageMaxData.value, "voltageMaxData");
      }
    })
    .finally(() => {
      loadingNum.value++;
      console.log(loadingNum.value, "loadingNum.value");
      if (loadingNum.value == 14) {
        loading.value = false;
        console.log(loading.value, "loading!!!!!!!");
      }
    });
};

voltageMaxOption.yAxis.name = "最高电压（V）";
voltageMaxOption.series[0].name = "最高电压（V）";
voltageMaxOption.series[0].lineStyle.color = "#24b496";
voltageMaxOption.series[0].itemStyle.normal.borderColor = "#24b496";
voltageMaxOption.series[0].areaStyle.color = new echarts.graphic.LinearGradient(
  0,
  0,
  0,
  1,
  [
    {
      offset: 0,
      color: "rgba(36, 180, 150, 1)",
    },
    {
      offset: 0.6,
      color: "rgba(36, 180, 150, 0.5)",
    },
    {
      offset: 1,
      color: "rgba(36, 180, 150, 0.1)",
    },
  ]
);

// 最高电压分布
const sinMaxData = ref([
  {
    product: "1",
    count: 0.1,
  },
  {
    product: "2",
    count: 0.14,
  },
  {
    product: "3",
    count: 0.17,
  },
  {
    product: "4",
    count: 0.02,
  },
  {
    product: "5",
    count: 0.2,
  },
  {
    product: "6",
    count: 0.1,
  },
  {
    product: "7",
    count: 0.14,
  },
  {
    product: "8",
    count: 0.17,
  },
  {
    product: "9",
    count: 0.02,
  },
  {
    product: "10",
    count: 0.2,
  },
]);

const sinMaxOption = reactive(JSON.parse(JSON.stringify(barOption)));
sinMaxOption.dataset.source = sinMaxData.value;
const getSignalMaxVoltageDistList = () => {
  getSignalMaxVoltageDist({
    vin: userInfo.value.vin,
  })
    .then(async (res) => {
      console.log("单体最高电压分布", res);
      if (res.code === 200) {
        sinMaxData.value = [];
        res.result.map((item) => {
          let arr = {
            product: item.x,
            count: item.y,
          };
          sinMaxData.value.push(arr);
        });
        sinMaxOption.dataset.source = sinMaxData.value;
        sinMaxOption.color = [];
        console.log(sinMaxData.value, "sinMaxData");
      }
    })
    .finally(() => {
      loadingNum.value++;
      console.log(loadingNum.value, "loadingNum.value");
      if (loadingNum.value == 14) {
        loading.value = false;
        console.log(loading.value, "loading!!!!!!!");
      }
    });
};

sinMaxOption.yAxis.name = "最高电压";
sinMaxOption.xAxis.name = "电池组编号";
// 温度一致性
const temperatureData = ref([
  {
    product: "23-02-01",
    count: 0.1,
  },
  {
    product: "23-02-02",
    count: 0.14,
  },
  {
    product: "23-02-03",
    count: 0.17,
  },
  {
    product: "23-02-04",
    count: 0.02,
  },
  {
    product: "23-02-05",
    count: 0.2,
  },
  {
    product: "23-02-06",
    count: 0.24,
  },
]);

const temperatureOption = reactive(JSON.parse(JSON.stringify(lineOption)));
temperatureOption.dataset.source = temperatureData.value;
temperatureOption.yAxis.name = "最大温差（℃）";
temperatureOption.series[0].name = "最大温差（℃）";
const getTempConsistencyList = () => {
  getTempConsistency({
    vin: userInfo.value.vin,
  })
    .then(async (res) => {
      console.log("温度一致性", res);
      if (res.code === 200) {
        temperatureData.value = [];
        res.result.map((item) => {
          let Xitem = "";
          // if (item.x.length > 10) {
          //   Xitem = item.x.substring(0, 10);
          // } else {
          Xitem = item.x;
          // }
          let arr = {
            product: Xitem,
            count: item.y,
          };
          temperatureData.value.push(arr);
        });
        temperatureOption.dataset.source = temperatureData.value;
        temperatureOption.color = [];
        console.log(temperatureData.value, "temperatureData");
      }
    })
    .finally(() => {
      loadingNum.value++;
      console.log(loadingNum.value, "loadingNum.value");
      if (loadingNum.value == 14) {
        loading.value = false;
        console.log(loading.value, "loading!!!!!!!");
      }
    });
};
temperatureOption.series[0].lineStyle.color = "#e69c2d";
temperatureOption.series[0].itemStyle.normal.borderColor = "#e69c2d";
temperatureOption.series[0].areaStyle.color =
  new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    {
      offset: 0,
      color: "rgba(166, 113, 69, 1)",
    },
    {
      offset: 0.6,
      color: "rgba(166, 113, 69, 0.5)",
    },
    {
      offset: 1,
      color: "rgba(166, 113, 69, 0.1)",
    },
  ]);

// 单体最高温度变化趋势
const temChangeData = ref([
  {
    product: "23-02-01",
    count: 20,
  },
  {
    product: "23-02-02",
    count: 14,
  },
  {
    product: "23-02-03",
    count: 47,
  },
  {
    product: "23-02-04",
    count: 32,
  },
  {
    product: "23-02-05",
    count: 62,
  },
  {
    product: "23-02-06",
    count: 24,
  },
]);
const temChangeOption = reactive(JSON.parse(JSON.stringify(lineOption)));
temChangeOption.dataset.source = temChangeData.value;
const getSignalMaxTempList = () => {
  getSignalMaxTemp({
    vin: userInfo.value.vin,
  })
    .then(async (res) => {
      console.log("单体最高温度变化趋势", res);
      if (res.code === 200) {
        temChangeData.value = [];
        res.result.map((item) => {
          let Xitem = "";
          // if (item.x.length > 10) {
          //   Xitem = item.x.substring(0, 10);
          // } else {
          Xitem = item.x;
          // }
          let arr = {
            product: Xitem,
            count: item.y,
          };
          temChangeData.value.push(arr);
        });
        temChangeOption.dataset.source = temChangeData.value;
        temChangeOption.color = [];
        console.log(temChangeData.value, "temChangeData");
      }
    })
    .finally(() => {
      loadingNum.value++;
      if (loadingNum.value == 14) {
        loading.value = false;
        console.log(loading.value, "loading!!!!!!!");
      }
    });
};

temChangeOption.yAxis.name = "最高温度（℃）";
temChangeOption.series[0].name = "最高温度（℃）";
temChangeOption.series[0].lineStyle.color = "#e69c2d";
temChangeOption.series[0].itemStyle.normal.borderColor = "#e69c2d";
temChangeOption.series[0].areaStyle.color = new echarts.graphic.LinearGradient(
  0,
  0,
  0,
  1,
  [
    {
      offset: 0,
      color: "rgba(166, 113, 69, 1)",
    },
    {
      offset: 0.6,
      color: "rgba(166, 113, 69, 0.5)",
    },
    {
      offset: 1,
      color: "rgba(166, 113, 69, 0.1)",
    },
  ]
);

// 最大温差升速
const temUpData = ref([
  {
    product: "23-02-01",
    count: 20,
  },
  {
    product: "23-02-02",
    count: 14,
  },
  {
    product: "23-02-03",
    count: 47,
  },
  {
    product: "23-02-04",
    count: 32,
  },
  {
    product: "23-02-05",
    count: 62,
  },
  {
    product: "23-02-06",
    count: 24,
  },
]);

const temUpOption = reactive(JSON.parse(JSON.stringify(lineOption)));
// 获取最大温差数据
const getMaxTempRiseRateList = () => {
  getMaxTempRiseRate({
    vin: userInfo.value.vin,
  })
    .then(async (res) => {
      console.log("最大温差数据", res);
      if (res.code === 200) {
        temUpData.value = [];
        res.result.map((item) => {
          let Xitem = "";
          // if (item.x.length > 10) {
          //   Xitem = item.x.substring(0, 10);
          // } else {
          Xitem = item.x;
          // }
          let arr = {
            product: Xitem,
            count: item.y,
          };
          temUpData.value.push(arr);
        });
        temUpOption.dataset.source = temUpData.value;
        temUpOption.color = [];
        console.log(temUpData.value, "temUpData");
      }
    })
    .finally(() => {
      loadingNum.value++;
      if (loadingNum.value == 14) {
        loading.value = false;
        console.log(loading.value, "loading!!!!!!!");
      }
    });
};

temUpOption.dataset.source = temUpData.value;
temUpOption.yAxis.name = "℃/分钟";
temUpOption.series[0].name = "最大温升速率℃/分钟";
temUpOption.series[0].lineStyle.color = "#e69c2d";
temUpOption.series[0].itemStyle.normal.borderColor = "#e69c2d";
temUpOption.series[0].areaStyle.color = new echarts.graphic.LinearGradient(
  0,
  0,
  0,
  1,
  [
    {
      offset: 0,
      color: "rgba(166, 113, 69, 1)",
    },
    {
      offset: 0.6,
      color: "rgba(166, 113, 69, 0.5)",
    },
    {
      offset: 1,
      color: "rgba(166, 113, 69, 0.1)",
    },
  ]
);

// 单体最高温度分布
const sinTemData = ref([
  {
    product: "23-02-01",
    count: 20,
  },
  {
    product: "23-02-02",
    count: 14,
  },
  {
    product: "23-02-03",
    count: 47,
  },
  {
    product: "23-02-04",
    count: 32,
  },
  {
    product: "23-02-05",
    count: 62,
  },
  {
    product: "23-02-06",
    count: 24,
  },
  {
    product: "23-02-07",
    count: 21,
  },
  {
    product: "23-02-08",
    count: 34,
  },
  {
    product: "23-02-09",
    count: 47,
  },
]);
const sinTemOption = reactive(JSON.parse(JSON.stringify(barOption)));
sinTemOption.dataset.source = sinTemData.value;

// 单体最高温度分布
const getSignalMaxTempDistList = () => {
  getSignalMaxTempDist({
    vin: userInfo.value.vin,
  })
    .then(async (res) => {
      console.log("单体最高温度分布", res);
      if (res.code === 200) {
        sinTemData.value = [];
        res.result.map((item) => {
          let arr = {
            product: item.x,
            count: item.y,
          };
          sinTemData.value.push(arr);
        });
        sinTemOption.dataset.source = sinTemData.value;
        sinTemOption.color = [];
        console.log(sinTemOption.dataset.source, "sinTemData");
      }
    })
    .finally(() => {
      loadingNum.value++;
      if (loadingNum.value == 14) {
        loading.value = false;
        console.log(loading.value, "loading!!!!!!!");
      }
    });
};

sinTemOption.yAxis.name = "最高温度次数";
sinTemOption.xAxis.name = "电池组编号";

sinTemOption.series[0].itemStyle.color = new echarts.graphic.LinearGradient(
  0,
  0,
  0,
  1,
  [
    {
      offset: 0,
      color: "rgba(166, 113, 69, 1)",
    },
    {
      offset: 0.6,
      color: "rgba(166, 113, 69, 0.5)",
    },
    {
      offset: 1,
      color: "rgba(166, 113, 69, 0.1)",
    },
  ]
);

// soc一致性
const engLineData = ref([
  {
    product: "23-02-01",
    count: 0.1,
  },
  {
    product: "23-02-02",
    count: 0.14,
  },
  {
    product: "23-02-03",
    count: 0.17,
  },
  {
    product: "23-02-04",
    count: 0.02,
  },
  {
    product: "23-02-05",
    count: 0.2,
  },
  {
    product: "23-02-06",
    count: 0.24,
  },
]);
const engLineOption = reactive(JSON.parse(JSON.stringify(lineOption)));
engLineOption.dataset.source = engLineData.value;

const getSocConsistencyList = () => {
  getSocConsistency({
    vin: userInfo.value.vin,
  })
    .then(async (res) => {
      console.log("soc一致性", res);
      if (res.code === 200) {
        engLineData.value = [];
        res.result.map((item) => {
          let Xitem = "";
          // if (item.x.length > 10) {
          //   Xitem = item.x.substring(0, 10);
          // } else {
          Xitem = item.x;
          // }

          let arr = {
            product: Xitem,
            count: item.y,
          };
          engLineData.value.push(arr);
        });
        engLineOption.dataset.source = engLineData.value;
        engLineOption.color = [];

        engLineOption.series[0].name = "SOC速率";
        console.log(engLineData.value, "engLineData");
      }
    })
    .finally(() => {
      loadingNum.value++;
      if (loadingNum.value == 14) {
        loading.value = false;
        console.log(loading.value, "loading!!!!!!!");
      }
    });
};
engLineOption.yAxis.name = "SOC速率";
const chargeAnalysis = reactive([
  {
    name: "近三个月充电订单（笔）",
    value: 27,
    unit: "笔",
  },
  {
    name: "异常订单数",
    value: 4,
    unit: "笔",
  },
  {
    name: "异常率",
    value: 14.8,
    unit: "%",
  },
]);

// 近期订单
// const abnormalOrder= reactive([
// 	{ type: '电池整包过压', name: '海南琼海市博鳌机场（2024-7-13 22:02）' },
// 	{ type: '最大温升速率异常', name: '海南琼海市博鳌机场（2024-7-13 22:02）'},
// 	{ type: '充电SOC超范围', name: '海南琼海市博鳌机场（2024-7-13 22:02）'},
// 	{ type: '需求电压超过最高', name: '海南琼海市博鳌机场（2024-7-13 22:02）'},
// ])
// 饼图
const engPieData = ref([
  {
    product: "电池整包过压",
    count: 4,
  },
  {
    product: "最大温升速率异常",
    count: 3,
  },
  {
    product: "充电SOC超范围",
    count: 3,
  },
  {
    product: "需求电压超过最高",
    count: 1,
  },
]);

const engPieOption = reactive(pieOption);
engPieOption.dataset.source = engPieData.value;

let abnormalOrder = ref([
  // {
  //   type: '过热',
  //   chargeTime: '2024-11-04 23:44:28',
  //   chargeStation: '充电站C',
  //   stake: '桩5',
  // },
  // {
  //   type: '过热',
  //   chargeTime: '2024-11-04 23:44:28',
  //   chargeStation: '充电站C',
  //   stake: '桩5',
  // },
]);
const getOrderAnalysisList = () => {
  getOrderAnalysis({
    vin: userInfo.value.vin,
  })
    .then(async (res) => {
      console.log("指标分析", res);
      if (res.code === 200) {
        chargeAnalysis[0].value = res.result.recentChargeTimes;
        chargeAnalysis[1].value = res.result.errorChargeTimes;
        chargeAnalysis[2].value = res.result.errorRate;
        abnormalOrder.value = res.result.errorDetailList
          ? res.result.errorDetailList
          : [];

        engPieData.value = [];
        res.result.errorChargeType.map((item) => {
          let arr = {
            product: item.type,
            count: item.num,
          };
          engPieData.value.push(arr);
        });

        // }else{
        //    engPieData.value=[
        //     {
        //       product: "电池整包过压",
        //       count: 100,
        //     },
        //     {
        //       product: "最大温升速率异常",
        //       count: 0,
        //     },
        //     {
        //       product: "充电SOC超范围",
        //       count: 0,
        //     },
        //     {
        //       product: "需求电压超过最高",
        //       count: 0,
        //     },
        //   ];
        // }
        // engPieData.value = res.result.errorChargeType
        //   ? res.result.errorChargeType

        engPieOption.dataset.source = engPieData.value;
        if (
          !res.result.errorChargeType ||
          res.result.errorChargeType.length == 0
        ) {
          engPieOption.color = [
            "#008000",
            "#008000",
            "#008000",
            "#008000",
            "#008000",
          ];
        } else {
          engPieOption.color = [
            "#a62da8",
            "#595ede",
            "#e09f31",
            "#4ac1e2",
            "#9dff86",
          ];
        }
      }
    })
    .finally(() => {
      loadingNum.value++;
      if (loadingNum.value == 14) {
        loading.value = false;
        console.log(loading.value, "loading!!!!!!!");
      }
    });
};

const batterInfo1 = reactive([
  {
    type: "电池类型",
    value: "三元材料电池",
    unit: "",
  },
  {
    type: "额定容量",
    value: "5",
    unit: "Ah",
  },
  {
    type: "标称总能量",
    value: "5",
    unit: "kWh",
  },
]);
const batterInfo2 = reactive([
  {
    type: "当前电池估价",
    value: "5",
    unit: "元",
  },
  {
    type: "电池剩余容量",
    value: "5",
    unit: "Ah",
  },
  {
    type: "电池故障率",
    value: "5",
    unit: "%",
  },
]);
const batterInfo3 = reactive([
  {
    type: "最高允许充电总电压",
    value: "5",
    unit: "v",
  },
  {
    type: "单体最高允许充电电压",
    value: "5",
    unit: "v",
  },
  {
    type: "电池最高允许温度",
    value: "5",
    unit: "℃",
  },
]);
let batteryAttenuationRate = ref(83);
let remainBatteryCapacityRate = ref(23);
const getBatteryBaseDataList = () => {
  getBatteryBaseData({
    vin: userInfo.value.vin,
  })
    .then(async (res) => {
      console.log("电池基本信息", res);
      if (res.code === 200) {
        batteryAttenuationRate.value = res.result.batteryAttenuationRate;
        remainBatteryCapacityRate.value = res.result.remainBatteryCapacityRate;

        batterInfo1[0].value = res.result.typeOfBattery;
        batterInfo1[1].value = res.result.batteryCapacity;
        batterInfo1[2].value = res.result.grossEnergy;

        batterInfo2[2].value = res.result.batFailureRate;
        batterInfo2[1].value = res.result.remainBatteryCapacity;
        batterInfo2[0].value = res.result.currentBatteryPrice;

        batterInfo3[0].value = res.result.maximumPermissibleChargingVoltage;
        batterInfo3[1].value = res.result.chargingVoltageOfSingleUnit;
        batterInfo3[2].value = res.result.maximumTemperature;
      }
    })
    .finally(() => {
      loadingNum.value++;
      if (loadingNum.value == 14) {
        loading.value = false;
        console.log(loading.value, "loading!!!!!!!");
      }
    });
};

function getData() {
  setTimeout(() => {
    chartData.value = {
      categories: ["2012", "2013", "2014", "2015"],
      series: [
        {
          name: "目标值",
          data: [20, 23, 25, 87],
        },
        {
          name: "完成量",
          data: [54, 26, 45, 67],
        },
      ],
    };
  }, 500);
}

onMounted(() => {
  loading.value = true;
  loadingNum.value = 0;
  getData();
  // getInfoAll()
});

const radarOption = reactive(radarChart);

let man = [100, 9, 90, 66, 59, 94];
const total = [];
man.forEach((item, index) => {
  let max = item > man[index] ? index : man[index];
  max = max > 0 ? max * 1.5 : 10;
  total.push(max);
});
console.log(total, "这里这里");
const indicator = ref([
  {
    name: "电池容量",
    max: 100,
  },
  // {
  //   name: "最高电压",
  //   max: 100,
  // },
  {
    name: "最高温度",
    max: 100,
  },
  {
    name: "最高电压一致性",
    max: 100,
  },
  {
    name: "温度一致性",
    max: 100,
  },
  {
    name: "SOC一致性",
    max: 100,
  },
]);
radarOption.radar.indicator = indicator.value;
radarOption.series[0].data[0].value = man;

const getHealthAssAnalysisList = () => {
  getHealthAssAnalysis({
    vin: userInfo.value.vin,
  })
    .then(async (res) => {
      console.log("指标分析22", res);
      if (res.code === 200) {
        man[0] = res.result.batteryCapacityScore;
        // indicator.value[0].name = '电池容量'+': '+res.result.batteryCapacityScore;
        // man[1] = res.result.maxVoltageScore;
        man[1] = res.result.maxTemperatureScore;
        // indicator.value[1].name = '最高温度'+': '+res.result.maxTemperatureScore;

        man[2] = res.result.voltageConformityScore;
        // indicator.value[2].name = '电压一致性'+': '+res.result.voltageConformityScore;

        man[3] = res.result.tempConformityScore;
        // indicator.value[3].name = '温度一致性'+': '+res.result.tempConformityScore;

        man[4] = res.result.socconformityScore;
        // indicator.value[4].name = 'SOC一致性'+': '+res.result.socconformityScore;

        radarOption.color = ["#244ab7", "#244ab7"];
        radarOption.series[0].data[0].value = man;
        console.log(man, indicator, "indicator");
      }
    })
    .finally(() => {
      loadingNum.value++;
      if (loadingNum.value == 14) {
        loading.value = false;
        console.log(loading.value, "loading!!!!!!!");
      }
    });
};
</script>
<style lang="scss" scoped>
.content_hello {
  background: linear-gradient(89.59104588699104deg,
      rgba(37, 28, 93, 1) 5%,
      rgba(44, 31, 119, 1) 55.00000000000001%,
      rgba(36, 25, 102, 1) 96%);
  padding: 2.5rem;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.position_bgs {
  width: 100%;
  height: 18.75rem;
  position: absolute;
  top: 0;
  left: 0;
}

.bgs_san_jiao {
  position: absolute;
  top: 5rem;
  left: 14%;
}

.bgs_san_jiao_left {
  width: 1.125rem;
  height: 0.875rem;
  transform: rotate(270deg);
  margin-right: 0.25rem;
}

.bgs_san_jiao_center {
  width: 1rem;
  height: 0.75rem;
  transform: rotate(270deg);
  margin-right: 0.25rem;
}

.bgs_san_jiao_right {
  width: 0.875rem;
  height: 0.625rem;
  transform: rotate(270deg);
}

.bgs_san_jiao2_left {
  width: 0.875rem;
  height: 0.625rem;
  transform: rotate(90deg);
  margin-right: 2px;
}

.bgs_san_jiao2_center {
  width: 1rem;
  height: 0.75rem;
  transform: rotate(90deg);
  margin-right: 2px;
}

.bgs_san_jiao2_right {
  width: 1.125rem;
  height: 0.875rem;
  transform: rotate(90deg);
}

.bgs_circle {
  position: absolute;
  right: 0;
  top: 0;
  width: 200px;
}

.qin_cir1 {
  position: absolute;
  right: 15rem;
  top: 2.625rem;
  width: 1.75rem;
  height: 1.75rem;
}

.qin_cir2 {
  position: absolute;
  right: 13rem;
  top: 8.625rem;
  width: 1.375rem;
  height: 1.375rem;
}

.qin_cir3 {
  position: absolute;
  right: 10px;
  top: 20px;
  width: 10.625rem;
  height: 10.625rem;
}

.qin_cir4 {
  position: absolute;
  right: 0.625rem;
  top: 9rem;
  width: 2.5rem;
  height: 2.5rem;
  z-index: 4;
}

.vin_card {
  position: relative;
  z-index: 99;
  min-width: 40%;
  width: 70%;
  max-width: 90%;
  font-family: "苹方-简 常规体", "苹方-简 中黑体", "苹方-简", sans-serif;
  margin-top: 40px;
  // min-height: 2.375rem;
  padding: 0.5rem 0.5rem;
  border-radius: 2.375rem;
  background-color: rgba(222, 217, 255, 1);
  color: #271a73;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.34901960784313724);
  font-size: 1rem;
  text-align: left;
  //line-height: 2.375rem;
  display: flex;
  align-items: center;
}

.tan_left {
  padding-top: 1.25rem;
  /* width:40px; */
  /* height: 20px; */
  text-align: left;
  margin-top: 0.625rem;

  padding-bottom: 0.375rem;
}

.dian_ci_jia {
  display: flex;
}

.dian_ci {
  font-size: 1.625rem;
  color: rgb(255, 243, 243);
  font-weight: 400;
  font-style: normal;
  text-align: left;
}

.tan_right {
  padding-top: 2.5rem;
  margin-top: 0.625rem;
  margin-bottom: 0.375rem;
}

.dian {
  position: relative;
}

.bao_gao {
  display: flex;
  padding-top: 1rem;
  margin-bottom: 4rem;
  justify-content: space-between;

  .bao_gao_left {
    width: 47%;
    text-indent: 5px;
    height: 2.5rem;
    color: #fff;
    line-height: 2.5rem;
    background: linear-gradient(90deg,
        rgba(73, 80, 188, 1) 0%,
        rgba(43, 31, 115, 1) 100%);
    overflow: hidden;
    font-size: 1.125rem;
  }

  .bao_gao_right {
    font-size: 1.125rem;
    text-indent: 5px;

    text-align: left;
    width: 47%;
    height: 2.5rem;
    color: #fff;
    line-height: 2.5rem;
    overflow: hidden;
    background: linear-gradient(90deg,
        rgba(73, 80, 188, 0.5) 0%,
        rgba(43, 31, 115, 0.5) 100%);
  }
}

.scope {
  height: 1.75rem;
  line-height: 1.75rem;
  color: #fff;
  font-size: 1.75rem;
  text-align: center;
  font-weight: 500;
  margin-bottom: 1.5rem;
}

.scope_wrap {
  display: flex;
  justify-content: center;
}

.scope_bom {
  width: 14.25rem;
  height: 14.25rem;
  background-image: url("../assets/healthy/u263.png");
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3.5rem;
  color: #40d9ef;
}

.batter {
  padding-top: 15px;
  padding-bottom: 15px;
  font-size: 1.75rem;
  text-align: center;
  color: #40d9ef;
  letter-spacing: 3px;
}

.batter_btn {
  display: flex;
  justify-content: space-between;
  padding: 10px 0 30px 0;
  margin-bottom: 2rem;
}

.batter_btn_left {
  width: 46%;
  height: 5.125rem;
  line-height: 5.125rem;
  color: #fff;
  text-align: center;
  padding-left: 15px;
  background: linear-gradient(180deg,
      rgba(38, 24, 125, 1) 0%,
      rgba(72, 78, 185, 1) 99%);

  background-repeat: no-repeat;
  border-radius: 1rem;
  position: relative;
  font-size: 1.25rem;

  img {
    position: absolute;
    left: 1rem;
    bottom: 0.25rem;
    width: 3.375rem;
    height: 2.625rem;
    z-index: 0;
  }

  text {
    position: relative;
    z-index: 3;
  }
}

.batter_btn_right {
  width: 46%;
  height: 5.125rem;
  padding-left: 0.25rem;
  line-height: 5.125rem;
  color: #fff;
  text-align: center;
  background: linear-gradient(180deg,
      rgba(47, 29, 121, 1) 0%,
      rgba(149, 42, 162, 1) 98%);
  border-radius: 1rem;
  position: relative;
  font-size: 1.25rem;

  img {
    position: absolute;
    left: 1rem;
    bottom: 0.25rem;
    width: 3.375rem;
    height: 2.625rem;
    z-index: 0;
  }

  text {
    position: relative;
    z-index: 3;
  }
}

.batter_base {
  font-size: 20px;
  color: #fff;
  margin-bottom: 20px;
}

.base_con {
  width: 100%;
  height: 26.25rem;
  border-radius: 0.625rem;
  border: solid 1px #3e3091;
  background-color: #2c207b;
}

.base_con1 {
  display: flex;
  height: 9rem;
  margin: 0 0.625rem;
  justify-content: space-around;
  border-bottom: solid 1px #3655a0;
}

.echartsWrap {
  width: 100%;
  height: 300px;
  // border: solid 1px #ccc;
}

.base_con2 {
  display: flex;
  height: 9rem;
  margin: 0 0.625rem;
  justify-content: space-around;
  border-bottom: solid 1px #3655a0;
}

.base_con3 {
  display: flex;
  height: 9rem;
  margin: 0 0.625rem;
  justify-content: space-around;
}

.base_item {
  width: 30%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.con_name {
  padding-top: 0.625rem;
  font-size: 1.25rem;
  color: #a8a3cc;
  margin-bottom: 0.375rem;
  position: relative;
  text-align: left;
  text-indent: 1rem;
  height: 5rem;
  overflow: hidden;
}

.con_name::before {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background-color: #40d9ef;
  position: absolute;
  top: 1.25rem;
  left: 0;
}

.con_value {
  text-align: left;
  font-weight: 500;
  height: 3rem;
  font-size: 1.75rem;
  line-height: 1.5rem;
  color: #fff;
  margin-bottom: 1.25rem;
}

.con_value2 {
  text-align: left;
  font-weight: 500;
  font-size: 1.75rem;
  height: 3rem;
  line-height: 1.5rem;
  color: #fff;
  margin-bottom: 1.25rem;
}

.ansy {
  display: flex;
  padding: 25px 0 0 0;
  justify-content: space-between;
  align-content: center;
}

.ansy_left {
  color: #fff;
  font-size: 1.25rem;
  position: relative;
  padding-left: 0.75rem;
  height: 2.1875rem;
  line-height: 2.1875rem;
}

.ansy_left::before {
  content: "";
  width: 0.25rem;
  display: block;
  height: 1.25rem;
  background-color: #952aa2;
  position: absolute;
  top: 0.5rem;
  color: #fff;
  left: 0;
}

.ansy_right {
  border: solid 1px #443699;
  border-radius: 2rem;
  height: 2.8125rem;
  line-height: 2.8125rem;
  text-align: center;
  margin-top: 0.75rem;
  color: #287ee0;
  padding: 0 0.25rem;
  font-size: 1rem;
  margin-bottom: 1.875rem;
}

.ansy_btn_wrap {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  position: relative;
  padding-bottom: 2.5rem;
}

.ansy_btn {
  width: 60%;
  height: 3.75rem;
  color: #3fcce8;
  text-align: center;
  text-indent: 1rem;
  border: solid 1px #2e51b9;
  line-height: 3.75rem;
  font-size: 1.25rem;
  border-radius: 0.5rem;
  background: linear-gradient(180deg,
      rgba(38, 24, 125, 1) 0%,
      rgba(72, 78, 185, 1) 99%);

  position: relative;

  .ansy_bor {
    height: 2rem;
    width: 0.25rem;
    position: absolute;
    top: 0.925rem;
    left: 0;
    background: #952aa2;
  }

  img {
    position: absolute;
    top: 0.75rem;
    left: 0.5rem;
    width: 2.875rem;
    height: 2.25rem;
  }
}

.ansy_date_btn {
  display: flex;
  color: #fff;
  font-size: 1rem;
  line-height: 2.1875rem;
  align-items: center;
  margin-bottom: 1rem;
}

.date_mounth {
  color: #2772d0;
}

.date_division {
  margin: 0 0.5rem;
}

.charge_analysis_item {
  .charge_analysis_value {
    text-align: center;
    color: #288beb;
    font-size: 2.1875rem;
    margin-bottom: 1rem;
  }

  .charge_analysis_name {
    color: #fff;
    font-size: 1rem;
  }
}

.charge_analysis {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;

  div:nth-child(2) {
    .charge_analysis_value {
      color: red;
    }
  }

  div:nth-child(3) {
    .charge_analysis_value {
      color: red;
    }
  }
}

.order_item {
  display: flex;
  color: #fffcfc;
  font-size: 1rem;
  align-items: center;
  height: 2rem;
  line-height: 2rem;
  margin-bottom: 1.5rem;
  font-weight: 300;
  position: relative;
}

.orderWrap {
  position: relative;
  padding: .5rem 0;

  div:last-child {
    margin: 0;
  }
}

.order_img {
  width: 2px;
  height: 100%;
  border-left: dashed 1px#595ede;
  position: absolute;
  top: 2px;
  left: 5px;
}

.order_icon {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background-color: #595ede;
  margin-right: 0.75rem;
}

.order_type {
  width: 40%;
  height: 2rem;
  overflow: hidden;
  text-align: left;
  text-indent: 0.75rem;
  background: linear-gradient(90deg,
      rgba(73, 80, 188, 0.9) 0%,
      rgba(43, 31, 115, 0.9) 100%);
}

.order_di {
  margin: 0 5px;
}

.order_name {
  width: 60%;
  overflow: hidden;
  height: 2rem;
}

.order_wrap {
  display: flex;
  justify-content: center;
  padding-top: 15px;
}

.order_btn {
  width: 100px;
  height: 30px;
  color: #3fcce8;
  text-align: center;
  border: solid 1px #2e51b9;
  line-height: 30px;
  font-size: 13px;
  border-radius: 5px;
  background-color: #2b2086;
  margin-bottom: 40px;
}

.health_major {
  color: #fff;
  padding-top: 0.5rem;
  position: relative;
}

.major_name {
  position: relative;
  z-index: 4;
  font-size: 1.75rem;
  margin-left: 1rem;
  font-weight: 600;
  display: flex;
  justify-content: left;
}

.major_1 {
  position: absolute;
  top: -0.75rem;
  left: 0;
  width: 4rem;
  height: 3.5rem;
}

.major_2 {
  position: absolute;
  top: 0rem;
  left: 0.75rem;
  width: 2.5rem;
  height: 2rem;
}

.major_3 {
  margin-top: 0.5rem;
  display: block;
  margin-left: 1rem;
  width: 2rem;
  height: 2rem;
}

.major_4 {
  display: block;
  margin-top: 0.5rem;
  margin-left: -0.2rem;
  width: 2rem;
  height: 2rem;
}

.batter_3 {
  left: 230px;
}

.batter_4 {
  left: 284px;
}

/* .charge_1{
	left: 320px;
}
.charge_2{
	left: 324px;
} */
.soc_tit {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 10px;
  line-height: 1.25rem;
  color: #fff;
  background: #2c207b;
  border: solid 1px #3d2f8e;
  border-radius: 6px;
  font-weight: 300;
  font-size: 1rem;
  text-align: left;
}

.soc_by {
  text-indent: 15px;
  position: relative;

  image {
    width: 10px;
    height: 10px;
    position: absolute;
    left: 10px;
    top: 13px;
  }

  background-image: url("../assets/healthy/u445.svg");
  background-size: 100% 100%;
}

.soc_sin {
  text-indent: 15px;
  position: relative;

  img {
    width: 10px;
    height: 10px;
    position: absolute;
    left: 10px;
    top: 6px;
  }

  background-image: url("../assets/healthy/u448.svg");
  background-size: 100% 100%;
}

.input {
  width: 330px;
  height: 44px;
  border: solid 1px #ded9ff;
  background-color: #ded9ff;
  border-radius: 5px;
  padding: 0 10px;
}

.inputWrap {
  padding-top: 50px;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 9;

  .search {
    margin-left: 10px;
    width: 40px;
    height: 44px;
    line-height: 44px;
    background-color: #3c3aa3;
    color: #2b80eb;
    text-align: center;
    border-radius: 5px;
    border: solid 1px #2b80eb;
  }
}
</style>
